<template>
  <!-- 项目登记新增 1-2 -->
  <div class="common-wrap" :class="{margin:isShow}">
    <div class="checkinAdd">
      <div class="tableLeft">
        <h3>项目基本信息</h3>
        <a-form :form="form">
          <a-form-item label="项目名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
            <a-input size="large" placeholder="请输入项目名" v-decorator="[
          '项目名称',
          {rules: [{ required: true, message: '请输入项目名' }]}
        ]" />
          </a-form-item>
          <a-form-item label="请输入项目编号" :label-col="{ span: 5 }" :wrapper-col="{ span: 24 }" style="">
            <a-input size="large" placeholder="请输入请输入项目编号" v-decorator="[
          '请输入项目编号',
          {rules: [{ required: true, message: '请输入请输入项目编号' }]}
        ]" />
          </a-form-item>
          <a-form-item label="登记时间" :label-col="{ span: 5 }">
            <a-date-picker placeholder="请选择日期" :showToday="false" class="mr10" />
            <a-time-picker :minuteStep="15" :secondStep="10" placeholder="请选择时间" />
          </a-form-item>
          <a-form-item label="项目类型" :label-col="{ span: 5 }">
            <a-radio-group v-model="value" style="margin-top:8px">
              <a-radio :value="1"><span style="margin-right:100px">软件类</span></a-radio>
              <a-radio :value="2">测绘类</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-form>

        <h3 style="margin:30px 0 10px">客户信息</h3>
        <a-form :form="form">
          <a-form-item label="客户单位" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
            <a-input size="large" placeholder="请输入客户单位" />
          </a-form-item>
          <a-form-item label="联系人" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
            <a-input size="large" placeholder="请输入联系人" />
          </a-form-item>
          <a-form-item label="联络方式" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
            <a-input size="large" placeholder="请输入联络方式" />
          </a-form-item>
        </a-form>
      </div>
      <div class="tableRight">
        <h3>合同信息</h3>
        <a-form :form="form">
          <a-form-item label="编号" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
            <a-input size="large" placeholder="请输入编号" />
          </a-form-item>
          <a-form-item label="名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
            <a-input size="large" placeholder="请输入名称" />
          </a-form-item>
          <a-form-item label="金额" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
            <a-input size="large" placeholder="请输入金额" />
          </a-form-item>
          <a-form-item label="甲方签订人" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
            <a-input size="large" placeholder="请输入甲方签订人" />
          </a-form-item>
          <a-form-item label="乙方签订人" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
            <a-input size="large" placeholder="请输入乙方签订人" />
          </a-form-item>
          <a-form-item label="支付节点" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
            <a-textarea placeholder="请输入支付节点" :rows="4" style="width:80%;" size="large" />
          </a-form-item>
          <a-form-item label="上传附件" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
            <a-upload name="file" :multiple="true" action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :headers="headers" @change="handleChange">
              <a-button>
                <a-icon type="upload" /> 选择文件上传
              </a-button>
            </a-upload>
            <p class="remark">只能上传jpg/png格式文件，文件大小不能超过500kb</p>
          </a-form-item>
        </a-form>
      </div>
    </div>
    <div class="checkinBox sumbitButton">
      <a-button type="primary" class="buttonColorGreen" size="large">提交</a-button>
      <router-link to="/checkIn">
        <a-button class="buttonColorWhite" size="large">取消</a-button>
      </router-link>
    </div>

  </div>
</template>

<script>
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      value: 1,
      headers: {
        authorization: 'authorization-text',
      },
      form: this.$form.createForm(this)
    }
  },
  methods: {
    handleChange() {     //上传文件
      // if (info.file.status !== 'uploading') {
      //   console.log(info.file, info.fileList);
      // }
      // if (info.file.status === 'done') {
      //   this.$message.success(`${info.file.name} file uploaded successfully`);
      // } else if (info.file.status === 'error') {
      //   this.$message.error(`${info.file.name} file upload failed.`);
      // }
    },
  }
}
</script>

<style>
.checkinAdd {
  display: flex;
  max-width: 1200px;
  padding-top: 50px;
  margin: 20px auto;
  justify-content: space-between;
}
#checkinAdd p {
  margin-top: 20px;
  margin-bottom: 5px;
  font-size: 16px;
}
.tableLeft,
.tableRight {
  flex: 0 0 40%;
  margin: 0 50px;
}
.checkinTime {
  padding: 24px 0 !important;
}
.checkinTime > * {
  flex: 1;
  padding: 0 5px;
}
.checkinTime span:first-child {
  flex: 0.5 !important;
  padding: 5px 0;
  font-size: 16px;
}
.checkinType {
  padding-bottom: 24px;
}
.checkinType span:first-child {
  flex: 0.5 !important;
  font-size: 16px;
}
.checkinBox {
  display: flex;
}
.sumbitButton {
  display: flex;
  justify-content: center;
  padding-bottom: 50px;
  margin-bottom: 20px;
}
.sumbitButton button {
  margin: 20px 30px;
}

.boxFlex > span:first-child {
  flex: 1;
  margin-top: 6px;
}
.boxFlex button {
  flex: 3;
}
.tableRight .checkinBox {
  margin: 20px 20px 27px 0;
}
.customMessage {
  margin-top: 20px;
}
.customMessage span {
  flex: 1;
  padding: 5px 0;
}
.checkinUpload .uploadFile {
  float: left;
  margin: 0 20px;
}
.checkinUpload div {
  margin-left: 8px;
}

.uploadBtn {
  width: 80%;
}
.ant-radio-group-default {
  width: 60%;
}
.margin {
  margin: 15px 0 0;
}

.ant-form label {
  float: left;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.65);
}
</style>
